(function (fruit, util) {
    fruit.ui.define('fruit.graphic.Pie', fruit.graphic.core, {
        properties: {
            data: {
                value: 0,
                observable: true
            },
            title: {
                value: '',
                observable: true
            },
            unit: {
                value: ''
            },
            container: {
                value: '',
                observable: true
            },
            colors:{
                value:["#a9d70b","#dedede","#ff0000"]
            }
        },
        methods: {
            init: function () {
                this.inherited();
                this.listen("data", this._updateAnimation);
                this.listen("container", this.draw);

                this._formater = d3.format(".0%");
            },
            drawText: function (text, fontsize,  y, x,color) {

                fontsize = Math.max(fontsize,9)
                var node = this.stage.append('text')
                    .attr("text-anchor", "middle")
                    .attr('y', y)
                    .attr('font-weight', 'bold')
                    .attr('font-size', fontsize + 'px')
                    .attr('font-family', 'Arial')
                    .attr('fill', color||'#999999')
                    .text(text);
                if (x) {
                    node.attr('x', x);
                }
                return node;
            },
            getPercent: function (value) {
                var z = this.maxValue() - this.minValue(), c =value|| this.value() - this.minValue();
                if (c < 0) {
                    return 0;
                }
                return c / z;
            },
            draw: function (sender, args) {
                var renderTo = this.container();
                var toEl = fruit.ui.Element.resolve(document.getElementById(renderTo));
                var height = this.height() || $(renderTo).height(), width = this.width() || $(renderTo).width();
                var pi = Math.PI, step = pi / 180, base =  Math.min(height, width);
                var radius = base *2/5 ,padding =0;
                if(!this.title()){
                    radius = base /2;
                    padding = -(height-base+5)
                }
                var pie = d3.layout.pie()
                    .sort(null)
                    .value(function(d) { return d.value; });

                var arc = d3.svg.arc()
                    .outerRadius(radius - 10)
                    .innerRadius(0);
                var color = d3.scale.ordinal()
                    .range(this.colors());
                var stage = this.stage = this.svg.append("g")

                    .attr("transform", "translate(" + width / 2 + "," + (height * 1/2+padding) + ")");

                var data = this.data(), count=0;
                data.forEach(function(d) {
                    count+= d.value;
                });
                var me = this;
                var g = stage.selectAll(".arc")
                    .data(pie(data))
                    .enter().append("g")
                    .attr("class", "arc");

                g.append("path")
                    .attr("d", arc)
                    .style('stroke','white')
                    .style('stroke-width','2px')
                    .style("fill", function(d) { return color(d.data.value); });
                g.append("text")
                    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
                    .attr("dy", ".35em")
                    .attr('font-size',Math.max((radius*1/5),9)+'px')
                    .style("text-anchor", "middle")
                    .text(function(d) {
                        return me._formater(d.value/count)
                    });
                this.drawText(this.title(),radius*1/4+'px',-radius);
                var label = g.append('g')
                    .attr('x', function(d, i) { return i==0?-radius:0 })
                    .attr('y', function(d) {return radius +padding })
                    .attr("transform", function(d) { return "translate(0," + radius + ")"; })

                label.append('rect')
                    .attr('height', radius/8)
                    .attr('width', radius/8)
                    .attr('y',-radius/8)
                    .attr('x', function(d, i) { return ((i==0?-radius:0)+radius/4)-radius/8 })
                    .style("fill", function(d) { return color(d.data.value); });;
                label.append('text')
                    .attr('x', function(d, i) { return (i==0?-radius:0)+radius/4 })
                    .attr("text-anchor", 'left')
                    .attr('font-family', 'Arial')
                    .attr('fill', '#999999')
                    .attr('font-size','9px')
                    .text(function(d){
                        return d.data.label;
                    });
                this.appendTo(toEl);

            },
            _updateAnimation:function(sender,obj){
                return;
                var start = obj.oldValue, change = obj.newValue - start, me = this;
                fruit.util.Animation.create(function(progress){
                    var value = start + progress*change;
                    me._updateValue(value);
                },600,60).start();
            },
            _updateValue: function (value) {
                var me = this;
                me._bar.attr("d", me._arc.endAngle(me.getAngle(value)))
                    .attr("fill",me.getColor(value));
                me._label.text(me._formater(me.getPercent(value)));
            }
        }
    })
})(fruit, fruit.util);